<script lang="ts" setup>
import type { WorkbenchProjectItem } from '@vben/common-ui';

import {
  AnalysisOverview,
} from '@vben/common-ui';
import { openWindow } from '@vben/utils';
import { IconifyIcon } from '@vben/icons';

import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { getDatasApi,getSystemdataApi,getQuicklinkApi } from '#/api/system/index';

import type { Component } from 'vue';
interface AnalysisOverviewItem {
  icon: Component | string;
  title: string;
  totalTitle: string;
  totalValue: number;
  value: number;
  decimals: number;
  prefix: string;
}

const overviewItems = ref<AnalysisOverviewItem[]>([]);
getDatasApi().then((res) => {
  overviewItems.value = res;
})

const dataSource = ref<any[]>([]);
getSystemdataApi().then((res) => {
  dataSource.value = res;
});

interface WorkbenchQuickNavItem {
  color?: string;
  icon: string;
  title: string;
  url?: string;
}
const quickNavItems = ref<WorkbenchQuickNavItem[]>([]);
getQuicklinkApi().then((res) => {
  quickNavItems.value = res;
});
const router = useRouter();
function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
  if (nav.url?.startsWith('http')) {
    openWindow(nav.url);
    return;
  }
  if (nav.url?.startsWith('/')) {
    router.push(nav.url).catch((error) => {
      console.error('Navigation failed:', error);
    });
  } else {
    console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
  }
}
</script>

<template>
  <div class="p-5">
    <AnalysisOverview :items="overviewItems" />

    <div class="mt-5 w-full lg:flex">
      <div class="bg-card text-card-foreground border-border rounded-xl mt-5 lg:mr-4 lg:mt-0 lg:w-1/2 xl:w-1/2 2xl:w-3/5">
        <div class="flex flex-col gap-y-1.5 p-5">
          <h3 class="font-semibold leading-none tracking-tight text-lg">系统信息</h3>
        </div>
        <div class="p-6 pt-0">
          <table class="w-full border-collapse border border-separate border-spacing my-table">
            <thead>
              <tr>
                <th class="p-1">参数</th>
                <th class="p-1">值</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in dataSource" :key="item.key">
                <td class="border-t p-1">{{ item.key }}</td>
                <td class="border-t p-1">{{ item.value }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="bg-card text-card-foreground border-border rounded-xl mt-5 lg:mt-0 lg:w-1/2 xl:w-1/2 2xl:w-2/5 flex flex-col">
        <div class="flex flex-col gap-y-1.5 p-5">
          <h3 class="font-semibold leading-none tracking-tight text-lg">快捷导航</h3>
        </div>
        <div class="flex flex-wrap p-0 h-full">
          <template v-for="(item, index) in quickNavItems" :key="item.title">
            <div
              :class="{
                'border-r-0': index % 3 === 2,
                'border-b-0': index < 3,
              }"
              class="flex-col-center border-border group w-1/3 cursor-pointer border-r border-t py-8 hover:shadow-xl"
              @click="navTo(item)"
            >
              <IconifyIcon
                :color="item.color"
                :icon="item.icon"
                class="size-8 transition-all duration-300 group-hover:scale-125"
              />
              <span class="text-md mt-2 truncate">{{ item.title }}</span>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  .my-table {
    border-color: rgba(0,0,0,0.1);
    thead {
      background-color: rgba(150,150,150,0.1);
    }
    td {
      border-color: rgba(0,0,0,0.1);
    }
    tbody tr:hover {
      background-color: rgba(150,150,150,0.03);
    }
  }
  .my-table:where(.dark, .dark *) {
    border-color: rgba(255,255,255,0.1);
    thead {
      background-color: rgba(200,200,200,0.1);
    }
    td {
      border-color: rgba(255,255,255,0.1);
    }
    tbody tr:hover {
      background-color: rgba(200,200,200,0.03);
    }
  }
</style>
